<#include "module/macro.ftl">
<@head title="${sheet.title!} - ${blog_title!}"/>
<#include "module/sidebar.ftl">
<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="${theme_base!}/source/js/v-code.min.js"></script>
<!-- ===========================
    =====>> Contact <<===== -->
<div class="contact-area pt-120 pb-120">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <div class="single-contact-address">
                    <h3>南京, 中国（总部）</h3>
                    <ul>
                        <li><i class="fa fa-map-marker"></i>
                            <p>江苏省南京市秦淮区石鼓路</p>
                        </li>
                        <li><i class="fa fa-qq"></i>
                            <p>1665572974</p>
                        </li>
                        <li><i class="far fa-envelope"></i>
                            <p>1665572974@qq.com</p>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="hading-title">联系 <span>我们</span></div>
                <div id="contact-form"  class="contact-form" >
                    <div class="contact-form-box row">
                        <div class="col-lg-2">
                            <input type="text" name="name" class="name-box"  v-model="form.model.name" placeholder="姓名" required>
                        </div>
                        <div class="col-lg-3">
                            <input type="number" name="number" class="name-box"  v-model="form.model.qq" placeholder="qq" required>
                        </div>
                        <div class="col-lg-3">
                            <input type="number" name="number" class="name-box"  v-model="form.model.wechat" placeholder="微信" required>
                        </div>
                        <div class="col-lg-12">
                            <textarea name="message" id="message-box"  v-model="form.model.requireMessage" placeholder="请说出你的需求？" required></textarea>
                        </div>
                        <div class="col-lg-12">
                            <button class="btn-1 message-send hover-effect" @click="handleSubmitClick">提交</button>
                            <p class="form-message error"></p>
                        </div>
                    </div>
                    <v-code :show="vcode.show" @success="handleSubmitDebounce" @close="vcode.show = false"></v-code>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="google-map"></div>
<!-- =====>> End Contact <<===== 
    ================================= -->


<@footer></@footer>


<script>

    if ($('#google-map').length) {


        function onApiLoaded() {
            var map = new AMap.Map('google-map', {
                center: [118.77747, 32.042845],
                zoom: 20
            });
            map.plugin(["AMap.ToolBar"], function () {
                map.addControl(new AMap.ToolBar());
            });


            marker = new AMap.Marker({
                icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
                position: [118.77747, 32.042845],
                offset: new AMap.Pixel(-13, -30)
            });
            marker.setMap(map);

        }

        var url = 'https://webapi.amap.com/maps?v=1.4.15&key=bf8d7c02927655573bbafb5861674cbb&callback=onApiLoaded';
        var jsapi = document.createElement('script');
        jsapi.charset = 'utf-8';
        jsapi.src = url;
        document.head.appendChild(jsapi);
    }
    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this,
                args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            }, wait);
            if (immediate && !timeout) func.apply(context, args);
        };
    }
    new Vue({
        el: '#contact-form',
        data() {
            return {
                form: {
                    model: {
                        name: null,
                        wechat: null,
                        qq: null,
                        requireMessage: null
                    },
                    saving: false
                },
                vcode: {
                    show: false
                }
            }
        },
        methods: {
            handleSubmitClick() {
                if (!this.form.model.name || this.form.model.name === '') {
                    swal("请填写姓名！", {
                        icon: "warning",
                        button: {
                            text: "继续填写",
                        }
                    });
                    return
                }
                if (this.form.model.name.length > 5) {
                    swal("姓名过长，不能超过 5 个字符！", {
                        icon: "warning",
                        button: {
                            text: "修改",
                        }
                    });
                    return
                }
                if (!this.form.model.wechat || this.form.model.wechat === '') {
                    swal("请填写微信号码！", {
                        icon: "warning",
                        button: {
                            text: "继续填写",
                        }
                    });
                    return
                }
                if (!this.form.model.qq || this.form.model.qq === '') {
                    swal("请填写 QQ 号码！", {
                        icon: "warning",
                        button: {
                            text: "继续填写",
                        }
                    });
                    return
                }
                if (!this.form.model.requireMessage || this.form.model.requireMessage === '') {
                    swal("请填写留言内容！", {
                        icon: "warning",
                        button: {
                            text: "继续填写",
                        }
                    });
                    return
                }
                if (this.form.model.requireMessage.length > 50) {
                    swal("留言内容过长，不能超过 50 个字符！", {
                        icon: "warning",
                        button: {
                            text: "修改",
                        }
                    });
                    return
                }
                this.vcode.show = true
            },
            handleSubmitDebounce: debounce(function () {
                const _this = this;
                _this.vcode.show = false;
                _this.handleSubmit();
            }, 300),
            handleSubmit() {
                axios.post('/api/content/messages', this.form.model)
                    .then(response => {
                        swal("提交成功！", {
                            icon: "success",
                            button: {
                                text: "确定",
                            }
                        });
                        this.form.model = {
                            name: null,
                            wechat: null,
                            qq: null,
                            requireMessage: null
                        }
                    })
            },
        }
    })

</script>
</body>
</html>